<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外卖订餐系统 - 我的</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 480px;
            margin: 0 auto;
            padding-bottom: 80px;
        }

        /* 用户信息区域 */
        .user-info {
            background: white;
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
        }

        .user-info::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 120px;
            background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
            border-radius: 20px 20px 0 0;
            z-index: 0;
        }

        .user-header {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid white;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .avatar i {
            font-size: 40px;
            color: #ff6b6b;
        }

        .user-details {
            margin-left: 20px;
            flex: 1;
        }

        .username {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 5px;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .user-level {
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }

        .user-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 25px;
            position: relative;
            z-index: 1;
        }

        .stat-item {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .stat-item:hover {
            transform: translateY(-5px);
        }

        .stat-value {
            font-size: 20px;
            font-weight: 700;
            color: #ff6b6b;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 13px;
            color: #666;
        }

        /* 功能区 */
        .section {
            background: white;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }

        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 10px;
            color: #ff6b6b;
        }

        .grid-menu {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }

        .menu-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 5px;
            border-radius: 12px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .menu-item:hover {
            background: #f9f9f9;
            transform: translateY(-3px);
        }

        .menu-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            font-size: 20px;
            color: #ff6b6b;
        }

        .menu-label {
            font-size: 12px;
            color: #555;
            text-align: center;
        }

        /* 订单状态 */
        .order-status {
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
        }

        .status-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            border-radius: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .status-item:hover {
            background: #f9f9f9;
        }

        .status-icon {
            position: relative;
            margin-bottom: 8px;
        }

        .status-icon i {
            font-size: 22px;
            color: #ff6b6b;
        }

        .status-badge {
            position: absolute;
            top: -5px;
            right: -8px;
            background: #ff4757;
            color: white;
            font-size: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .status-label {
            font-size: 13px;
            color: #555;
        }

        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
            z-index: 100;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            font-size: 12px;
            transition: all 0.3s ease;
        }

        .nav-item.active {
            color: #ff6b6b;
        }

        .nav-item i {
            font-size: 22px;
            margin-bottom: 5px;
        }

        .nav-item:hover {
            color: #ff6b6b;
            transform: translateY(-3px);
        }

        /* 响应式调整 */
        @media (max-width: 480px) {
            .grid-menu {
                grid-template-columns: repeat(3, 1fr);
            }

            .user-info {
                padding: 20px 15px;
            }

            .avatar {
                width: 70px;
                height: 70px;
            }

            .username {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 用户信息区域 -->
    <div class="user-info">
        <div class="user-header">
            <div class="avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="user-details">
                <div class="username">美食探索者</div>
                <div class="user-level">黄金会员</div>
            </div>
        </div>

        <div class="user-stats">
            <div class="stat-item">
                <div class="stat-value">¥128</div>
                <div class="stat-label">余额</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">368</div>
                <div class="stat-label">积分</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">15</div>
                <div class="stat-label">优惠券</div>
            </div>
        </div>
    </div>

    <!-- 订单状态 -->
    <div class="section">
        <div class="section-title">
            <i class="fas fa-clipboard-list"></i>
            我的订单
        </div>
        <div class="order-status">
            <div class="status-item">
                <div class="status-icon">
                    <i class="fas fa-money-bill-wave"></i>
                </div>
                <div class="status-label">待付款</div>
            </div>
            <div class="status-item">
                <div class="status-icon">
                    <i class="fas fa-utensils"></i>
                    <span class="status-badge">2</span>
                </div>
                <div class="status-label">待使用</div>
            </div>
            <div class="status-item">
                <div class="status-icon">
                    <i class="fas fa-truck"></i>
                    <span class="status-badge">3</span>
                </div>
                <div class="status-label">配送中</div>
            </div>
            <div class="status-item">
                <div class="status-icon">
                    <i class="fas fa-star"></i>
                </div>
                <div class="status-label">待评价</div>
            </div>
            <div class="status-item">
                <div class="status-icon">
                    <i class="fas fa-undo"></i>
                </div>
                <div class="status-label">退款/售后</div>
            </div>
        </div>
    </div>

    <!-- 功能区 -->
    <div class="section">
        <div class="section-title">
            <i class="fas fa-th-large"></i>
            常用功能
        </div>
        <div class="grid-menu">
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="menu-label">我的地址</div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-ticket-alt"></i>
                </div>
                <div class="menu-label">优惠券</div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-coins"></i>
                </div>
                <div class="menu-label">积分商城</div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-gift"></i>
                </div>
                <div class="menu-label">会员中心</div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="menu-label">历史订单</div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-heart"></i>
                </div>
                <div class="menu-label">我的收藏</div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-comment-dots"></i>
                </div>
                <div class="menu-label">客服中心</div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-cog"></i>
                </div>
                <div class="menu-label">设置</div>
            </div>
        </div>
    </div>

    <!-- 推荐区 -->
    <div class="section">
        <div class="section-title">
            <i class="fas fa-fire"></i>
            热门推荐
        </div>
        <div class="grid-menu">
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-store"></i>
                </div>
                <div class="menu-label">商家入驻</div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-user-friends"></i>
                </div>
                <div class="menu-label">邀请好友</div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-question-circle"></i>
                </div>
                <div class="menu-label">帮助中心</div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="fas fa-star"></i>
                </div>
                <div class="menu-label">评价有礼</div>
            </div>
        </div>
    </div>
</div>

<nav class="bottom-nav">
    <a href="first.html" class="nav-item active">
        <i class="fas fa-home"></i>
        <span>首页</span>
    </a>
    <a href="find.html" class="nav-item">
        <i class="fas fa-search"></i>
        <span>发现</span>
    </a>
    <a href="order.html" class="nav-item">
        <i class="fas fa-file-invoice"></i>
        <span>订单</span>
    </a>
    <a href="me.html" class="nav-item">
        <i class="fas fa-user"></i>
        <span>我的</span>
    </a>
</nav>

<script>
    // 简单的交互效果
    document.querySelectorAll('.menu-item, .status-item').forEach(item => {
        item.addEventListener('click', function() {
            const label = this.querySelector('.menu-label, .status-label').textContent;
            alert(`您点击了: ${label}`);
        });
    });

    // 底部导航切换效果
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelectorAll('.nav-item').forEach(nav => {
                nav.classList.remove('active');
            });
            this.classList.add('active');
        });
    });
</script>
</body>
</html>